<template>
  <div class="a">
    <div style="position: relative;">
      <div class="circle">
        <!-- <span class="number">{{form.subletCount}}</span> -->
        <span class="number">2</span>
      </div>
      <div class="text" style="top: 80px;">转租数据</div>
    </div>
    <div style="position: relative;">
      <div class="circle2">
        <span class="number">0</span>
      </div>
      <div class="text" style="top: 80px;">空置数据</div>
    </div>
    <div style="position: relative;">
      <div class="circle3">
        <span class="number">0</span>
      </div>
      <div class="text" style="top: 80px;">欠租数据</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          //设备总数
          subletCount: 0
        }
      }
    },
    created() {

    },
    methods: {
      init(data) {
        this.form = {
          ...data
        }
      }
    },
  }
</script>

<style scoped lang="scss">
  .circle {
    position: relative;
    width: 100px;
    /* 圆环的直径 */
    height: 100px;
    border-radius: 50%;
    border: 20px solid #FF8C00;
    border-bottom-color: transparent;
    /* 使底部边框透明，形成开口 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2em;
    /* 调整数字大小 */
  }

  .circle2 {
    position: relative;
    width: 100px;
    /* 圆环的直径 */
    height: 100px;
    border-radius: 50%;
    border: 20px solid #AB0018;
    border-bottom-color: transparent;
    /* 使底部边框透明，形成开口 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2em;
    /* 调整数字大小 */
  }

  .circle3 {
    position: relative;
    width: 100px;
    /* 圆环的直径 */
    height: 100px;
    border-radius: 50%;
    border: 20px solid #D9B00B;
    border-bottom-color: transparent;
    /* 使底部边框透明，形成开口 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2em;
    /* 调整数字大小 */
  }

  .number {
    color: #ffffff;
    position: relative;
    z-index: 2;
  }

  .text {
    position: absolute;
    width: 100%;
    /* 确保文字可以居中 */
    text-align: center;
    /* 圆环底部下方的位置，需要根据实际情况调整 */
    font-size: 1em;
    /* 文字大小 */
    color: #ffffff;
    /* 文字颜色 */
  }

  .a {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
</style>
